<template>
  <div class="author-detail">
    <NavBar />
    <div class="author-info">
      <img :src="author.picture" alt="作者头像" class="author-image">
      <h2 class="author-name">{{ author.name }}</h2>
      <p class="author-bio">{{ author.bio }}</p>
      <!-- 添加作者介绍 -->
      <div class="author-description" v-if="author.introduction">
        <h3 class="text-lg font-semibold text-gray-800 mb-2">作者介绍</h3>
        <p class="text-gray-700">{{ author.introduction }}</p>
      </div>
    </div>
    <div class="works-list">
      <h3 class="text-xl font-bold text-gray-800 mb-4">作品展示</h3>
      <ul class="space-y-2">
        <li v-for="work in author.works" :key="work.id" class="bg-white hover:bg-gray-100 p-4 rounded-md shadow-sm transition duration-300 ease-in-out">
          <div class="flex items-center">
            <!-- 添加作品图片 -->
            <img :src="work.workPicture" alt="作品封面" class="work-image mr-4">
            <div>
              <span class="text-gray-800 font-medium" @click="goToWorkDetail(work.id)">作品 {{ work.id }}：</span>
              <span class="text-gray-700" @click="goToWorkDetail(work.id)">{{ work.name }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <Footer />
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
import Footer from '@/components/Footer.vue'

export default {
  components: {
    NavBar,
    Footer
  },
  data() {
    return {
      author: {}
    }
  },
  mounted() {
    const authorId = this.$route.params.authorId;
    this.$http.get(`/authors/${authorId}`)
      .then((response) => {
        // console.log(response.data);
        this.author = response.data;
      })
      .catch((error) => {
        console.error('获取作者详情失败:', error);
      });
  },
  methods: {
    goToWorkDetail(workId) {
      this.$router.push({ name: 'WorksDetail', params: { id: workId } });
    }
  }
}
</script>

<style scoped>
.author-info {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f9fafb;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.author-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
}

.author-name {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.author-bio {
  font-size: 16px;
  line-height: 1.5;
  color: #666;
}

.author-description {
  margin-top: 20px;
}

.works-list {
  background: #f9fafb;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
}

.works-list h3 {
  font-size: 20px;
  margin-bottom: 16px;
  color: #333;
}

.works-list ul {
  list-style: none;
  padding: 0;
}

.works-list li {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 12px;
  margin-bottom: 8px;
  transition: background 0.3s ease;
}

.works-list li:hover {
  background: #f1f5f9;
}

.works-list span {
  cursor: pointer;
  color: #333;
}

.work-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
}
</style>